<template>
    <div class="headerimg">
        <button class="okbtn">确定</button>
        <button @click="returnclick" class="retbtn">取消</button>
        <p class="username">请输入用户名:</p>
        <p class="password">请输入密码:</p>
        <p class="spassword">请确认密码:</p>
        <p class="mobnum">请输入手机号码:</p>
        <input type="text" class="userin">
        <input type="text" class="passin">
        <input type="text" class="passsure">
        <input type="text" class="mobin">
    </div>
</template>

<script>
export default{
    methods:{
        returnclick(){
        this.$router.replace('/')
        }
    }
}
</script>

<style scoped>
div{
    position: relative;
}

p{
    font-size: 32px;
    color: gold;
}

button{
    font-size: 40px;
}

input{
    border: #BEBEBE solid 1px;
    background-color: black;
    border-radius: 5px;
    color: 	#FFFFCE;
    font-size: 30px;
}

.headerimg {
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    margin:-8px;
    position: fixed;
    background: url("../assets/8.jpg");
}

.username{
    position: absolute;
    left: 500px;
    top:200px;
}

.password{
    position: absolute;
    left: 500px;
    top: 300px;
}

.spassword{
    position: absolute;
    left: 500px;
    top:400px;
}

.mobnum{
    position: absolute;
    left: 500px;
    top:500px;
}

.userin{
    position: absolute;
    left: 740px;
    top: 238px;
}

.passin{
    position: absolute;
    left: 740px;
    top: 338px;
}

.passsure{
    position: absolute;
    left: 740px;
    top: 438px;
}

.mobin{
    position: absolute;
    left: 740px;
    top: 538px;
}

.okbtn{
    position: absolute;
    left: 900px;
    top: 700px;
    color: gold;
    background-color: black;
    cursor: pointer;
}

.retbtn{
    position: absolute;
    left: 1050px;
    top: 700px;
    color: gold;
    background-color: black;
    cursor: pointer;
}
</style>